<template>
  <el-dialog :title="!dataForm.payMethodId ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible"
             @closed="close"
  >
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="auto">
      <el-row>
        <el-col :span="12">
          <el-form-item label="支付方式名称" prop="payMethodName">
            <el-input v-model="dataForm.payMethodName" placeholder="支付方式名称"
                      :readonly="dataForm.sysBuiltIn === 1" :disabled="dataForm.sysBuiltIn === 1"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="dataForm.remark" placeholder="备注"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付方式状态" prop="status">
            <el-switch v-model="dataForm.status" active-color="#13ce66" inactive-color="#ff4949"
                       :active-value="1" :inactive-value="2"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序" prop="sortNum">
            <el-input-number v-model="dataForm.sortNum"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="box-card" header="收银结账场景">
            <el-form-item label="PC收银端显示/隐藏">
              <el-radio-group v-model="dataForm.allowPcPos">
                <el-radio :label="1">显示</el-radio>
                <el-radio :label="2">隐藏</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="其他收银端显示/隐藏">
              <el-radio-group v-model="dataForm.allowOtherPos">
                <el-radio :label="1">显示</el-radio>
                <el-radio :label="2">隐藏</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card" header="会员充值和会员权益购买场景"
                   v-if="(dataForm.sysBuiltIn === 1 && dataForm.payMethodType < 2) || dataForm.sysBuiltIn === 2"
          >
            <el-form-item label="是否支持会员办卡、充值">
              <el-radio-group v-model="dataForm.allowMember">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="box-card" header="挂账还款场景"
                   v-if="(dataForm.sysBuiltIn === 1 && dataForm.payMethodType < 2) || dataForm.sysBuiltIn === 2"
          >
            <el-form-item label="是否支持挂账还款">
              <el-radio-group v-model="dataForm.allowHangbills">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card" header="收订金场景"
                   v-if="(dataForm.sysBuiltIn === 1 && dataForm.payMethodType < 2) || dataForm.sysBuiltIn === 2"
          >
            <el-form-item label="是否支持收订金">
              <el-radio-group v-model="dataForm.allowDeposit">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="checkDataForm()" :disabled="disabledSubmit">确定</el-button>
		</span>
  </el-dialog>
</template>

<script>
import { addPayment, editPayment, getPayMethodById } from '@/api/payment/payMethod'

export default {
  name: 'PayMethodAddOrUpdate',
  data() {
    return {
      visible: false,
      disabledSubmit: false,
      dataForm: {
        payMethodId: '',
        payMethodName: '',
        //是否允许会员办卡充值使用
        allowMember: 1,
        allowHangbills: 1,
        allowPcPos: 1,
        allowOtherPos: 1,
        allowDeposit: 1,
        status: 1,
        remark: '',
        sortNum: 1,
        payMethodType: 0,
        sysBuiltIn: 2
      },
      dataRule: {
        payMethodName: [{ required: true, message: '支付方式名称不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    close() {
      this.$emit('close')
    },
    init(id) {
      this.dataForm.payMethodId = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.payMethodId) {
          this.disabledSubmit = true
          getPayMethodById(this.dataForm.payMethodId)
            .then(response => {
              this.dataForm = {
                payMethodId: response.data.payMethodId,
                payMethodName: response.data.payMethodName,
                allowMember: response.data.allowMember,
                allowHangbills: response.data.allowHangbills,
                allowPcPos: response.data.allowPcPos,
                allowOtherPos: response.data.allowOtherPos,
                allowDeposit: response.data.allowDeposit,
                status: response.data.status,
                remark: response.data.remark,
                sortNum: response.data.sortNum,
                sysBuiltIn: response.data.sysBuiltIn,
                payMethodType: response.data.payMethodType
              }
            }).finally(() => this.disabledSubmit = false)
        }
      })
    },
    // 表单提交
    checkDataForm() {
      this.$refs['dataForm'].validate(valid => {
        if (!valid) {
          return
        }
        this.dataFormSubmit()
      })
    },
    /**
     * 提交
     */
    dataFormSubmit() {
      this.disabledSubmit = true
      let axiosPromise = !this.dataForm.payMethodId ? addPayment(this.dataForm) : editPayment(this.dataForm)
      axiosPromise.then(response => {
        this.$modal.msgSuccess(response.msg)
        this.visible = false
        this.$emit('refreshDataList')
      }).catch(() => this.disabledSubmit = false)
    }
  }
}
</script>
